<template>
    <div class="container">
        <div class="top">
            <el-card>
                <!-- 查询条件 -->
                <el-form ref="queryFormRef" :model="queryForm" label-width="100px">
                    <el-row :gutter="12">
                        <el-col :span="6">
                            <el-form-item label="报告名称：" prop="reportName">
                                <el-input v-model="queryForm.reportName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="检查结果：" prop="checkResult">
                                <el-input v-model="queryForm.checkResult"></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="4">
                            <el-form-item label="时间：" prop="time">
                                <el-date-picker
                                    v-model="queryForm.timeArr"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="2">
                            <el-form-item>


                              <el-button style="margin-left: 200px;" @click="resetForm" type="primary" plain>重置</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <el-form-item>
                                <el-button style="margin-left: 200px;" @click="exportWord" type="warning" plain>导出报告</el-button>
                              <!-- <el-button style="margin-left: 200px;" @click="exportExcel" type="warning" plain>导出报告</el-button> -->
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
        </div>
        <div class="middle">
            <el-table ref="multipleTable" :data="tableData" stripe tooltip-effect="dark" style="width: 100%">
                <el-table-column label="报告名称" prop="reportName"></el-table-column>
                <el-table-column label="具体类型" prop="specificType"></el-table-column>
                <el-table-column label="脚本名称" prop="templateName"></el-table-column>
                <el-table-column label="时间" prop="time"></el-table-column>
                <el-table-column label="检查结果" prop="checkResult"></el-table-column>
                <el-table-column label="异常项" prop="abnormalityItem" width="px"></el-table-column>
                <el-table-column label="详情" prop="detail"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="success" @click="check(scope.row)" size="small" plain>下载</el-button>
                  </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryForm.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="queryForm.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
  window._interceptConfig = {
    collection: true, //整体开关
    click: true, //页面点击事件信息采集开关
    page: true, //页面跳转加载事件信息采集开关
    error: true, //异常信息采集开关
    http: true, //通讯信息采集开关
    name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
    url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
  };
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
    import { queryHistoryReports, exportHisReports } from "@/api/system/devops"
    import { ExportBriefDataDocx,getBase64Sync } from "@/utils/outword"
    export default {
        name: 'Hisreport',
        data() {
            return {
                // 表格数据
                total:0,
                tableData: null,
                // 查询参数
                queryForm: {
                    page:1,
                    size: 10,
                    id: 0,
                    reportName: "",
                    specificType: "",
                    templateName: "",
                    time: "",
                    checkResult: "",
                    abnormalityItem: "",
                },
              queryForm2: {
                page:1,
                size: 10,
                id: 0,
                reportName: "",
                specificType: "",
                templateName: "",
                time: "",
                checkResult: "",
                abnormalityItem: "",
              }
            }
        },

        methods: {
            handleSizeChange(val){
                    this.queryForm.size = val
                    this.initData()
                },
                handleCurrentChange(val){
                    this.queryForm.page = val
                    this.initData()
                },
            exportWord(){
                console.log("开始导出呀")
                exportHisReports(this.queryForm).then(resp=>{
                    let  data= {
                    list:resp.data,
                }
                ExportBriefDataDocx("/历史检查报告.docx", data, `历史检查报告.docx`);
                })
                
            },
          check(row){
            this.queryForm2.id = row.id
            exportHisReports(this.queryForm2).then(resp=>{
                    let  data= {
                    list:resp.data,
                }
                ExportBriefDataDocx("/历史检查报告.docx", data, `历史检查报告.docx`);
                })
          },
            // 加载数据
            initData() {
                queryHistoryReports(this.queryForm).then(response => {
                    this.tableData = response.data
                    this.total = parseInt(response.msg)
                })
            },
            // 重置表单
            resetForm(){
                this.$refs.queryFormRef.resetFields()
            },
            // 导出Excel
            exportExcel() {
                this.$confirm('是否确认导出当前数据？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.download('/devopscontroller/exportHisReports', {
                        ...this.queryForm
                    }, `历史日志_${new Date().getTime()}.xlsx`)
                })
              //this.queryForm.id = 0
            },
          exportExcel2() {
            this.$confirm('是否确认导出当前数据？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.download('/devopscontroller/exportHisReports', {
                ...this.queryForm2
              }, `历史日志_${new Date().getTime()}.xlsx`)
            })
            //this.queryForm.id = 0
          }
        },
        mounted() {
            this.initData()
        },
        watch:{
            //侦听queryForm
            queryForm:{
                deep: true,
                handler(newValue,oldValue){
                    this.initData()
                }
            }
        }
    }

</script>

<style>

    .middle {
        margin: 10px;
        width: 100%;
    }
</style>
